<template>
  <Toggle :status="defaultStatus" @changeStatus="handleChange">

  </Toggle>
</template>

<script lang="ts">
import { computed, defineComponent, reactive } from 'vue'
import Toggle from './Toggle.vue'
import { useAppStore } from '@/stores/app'

export default defineComponent({
  name: 'ThemeToggle',
  components: {
    Toggle
  },
  setup() {
    const appStore = useAppStore()
    let defaultStatus = appStore.themeConfig.theme === 'theme-dark'
    const svgStyle = reactive({
      fill: 'yellow',
      margin: 'auto'
    })
    const handleChange = (status: boolean) => {
      appStore.toggleTheme(status)
    }
    return {
      theme: computed(() => {
        return appStore.themeConfig.theme
      }),
      svg: computed(() => svgStyle),
      handleChange,
      defaultStatus
    }
  }
})
</script>
